<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<link type="text/css" rel="stylesheet" href="pages/monitor/css/rms-monitoring-workbench.css" />
<link rel="stylesheet" type="text/css" href="script/zTree/css/zTreeStyle/zTreeStyle.css" />
<script src="script/echarts/js/macarons.js"></script>
<style>
.chart_div{
    width: 100%;
    border: solid 1px #E5E5E5;
    margin-bottom: 20px;
    padding: 0 10px;
    box-sizing: border-box;
    height: 350px;
}
.chart_div_child{
  width:49%;
  height: 100%;
  display:inline-block;
}
.alert-query-box{
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
}
.alert-query-box select{
    width: 132px;
    height: 34px;
    border: solid 1px #d6d6d6;
    display:inline-block;
}
.date-search-group{
position: relative;
    width: 300px;
    height: 34px;
}
.alert-query-box table td{
   width:25%;
}
.alert-query-box label{
    display: inline-block;
}
</style>
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<ul class="breadcrumb">
				<li><span class="c-999">首页</span> <i
					class="icon-angle-right"></i>
				</li>
				<li><a class="c-666" onclick="util.showContent('pages/monitor/customer_monitor_workbench.jsp')">监控工作台（客户）</a></li>
			</ul>
		</div>
	</div>
	<div class="contant" style="padding-right: 2px;" id="refreshZone">
	<div class="title-box">
		<span class="control c-666">&nbsp;&nbsp;&nbsp;归属客户电池监控信息</span>
	</div>
	<!------------------------>
	<ul class="index_bat_detail">
		<li>
			<div class="index_bat_detail_in" style="background-color: #852B99;">
				<p class="bat_in_title "><a class="bg_purple">电池总量</a></p>
				<div class="bat_in_con">
					<em id="totalNum"></em>
				</div>
			</div>
		</li>
		<li>
			<div class="index_bat_detail_in" style="background-color: #FFB848;">
				<p class="bat_in_title "><a class="bg_orange" >今日累计报警数</a></p>
				<div class="bat_in_con">
					<div class="img1"></div>
					<span id="alertNum"></span>
				</div>
			</div>
		</li>
		<li>
			<div class="index_bat_detail_in" style="background-color: #28B779;">
				<p class="bat_in_title "><a class="bg_green" >充电中</a></p>
				<div class="bat_in_con">
					<div class="img2"></div>
					<span id="chargingNum"></span>
				</div>
			</div>
		</li>
		<li>
			<div class="index_bat_detail_in" style="background-color: #26A3DA;">
				<p class="bat_in_title "><a class="bg_blue" >非充电</a></p>
				<div class="bat_in_con">
					<div class="img3"></div>
					<span id="unChargingNum"></span>
				</div>
			</div>
		</li>
		<li>
			<div class="index_bat_detail_in" style="background-color: #D3D3D3;">
				<p class="bat_in_title "><a class="bg_gray" >下电</a></p>
				<div class="bat_in_con">
					<div class="img4"></div>
					<span id="powerFail"></span>
				</div>
			</div>
		</li>
	</ul>
	<!---------------------------------->
	<div class="chart_div hide">
	
		<div class="chart_div_child" id="alert_bar_chart">
		</div>
		
		<div class="chart_div_child" id="alert_pie_chart">
		</div>
	</div>
	
	<!-- <div class="title-box">
		<span class="police c-666">&nbsp;&nbsp;&nbsp;电池监控报警信息</span>
	</div>
	
	    <div class="alert-query-box">
		<table style="margin-top: -10px;">
			<tr>
				<td>
					<label>报警类型：</lable>
					<select id="alertName_select">
						<option value="">全部</option>
					</select>
				</td>
				
				<td>
					<label>报警级别：</lable>
					<select id="alertLevel_select" class="cusInfoId">
					  <option value="">全部</option>
					</select>
				</td>
				<td><input placeholder="报警时间" id="datepicker" class="data-picker Wdate cusInfoId" type="text" onClick="WdatePicker()"/></td>
				<td><div class="date-search-group">
				<input type="search" placeholder="请输入客户信息" id="cusInfoId" class="cusInfoId"/>
				<button id="btn_query"></button>
			</div></td>
			</tr>
		</table>
		</div>
	<div class="alert-content-list">
		<div class="row-fluid"><div id="alert_info_table_processing" class="dataTables_processing hide" >加載中...</div></div>
		<table class="table" id="alert_info_table">
			<thead>
				<tr>
					<th width="36"></th>
					<th>
						<div>电池ID</div>
					</th>
					<th><div>采集终端ID</div></th>
					<th><div>客户信息</div></th>
					<th><div>报警类型</div></th>
					<th><div>报警级别</div></th>
					<th><div>报警时间</div></th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div> -->
	<div class="title-box">
		<span class="place c-666">&nbsp;&nbsp;&nbsp;电池位置信息</span>
	</div>

	<div class="map-zTree">
		<div class="map-box">
			<div id="mapZoneDiv" class="zTreeIn-box">
			</div>
		</div>
	</div>
	
</div>
</div>
<jsp:include page="/pages/common/modal.jsp"></jsp:include>

<script type="text/javascript" src="pages/monitor/js/customer_monitor_workbench.js"></script>
<script type="text/javascript" src="script/zTree/js/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="script/zTree/js/jquery.ztree.excheck.min.js"></script>
<script type="text/javascript">
	var packAlertInfoList;
	var totalPage;
	var pageSize = 20;
	var nextPage = 2;
	var locked = false;
	jQuery(document).ready(function() {
	         //验证进入页面的是否是客户账号
	     	$.ajax({
					"type" : "post",
					"url" : "main/sysUser/checkUserClass.mvc",
					"async" : false,
					"dataType":"json",
					"success" : function(resp) {
					    if(resp.flag == "false"){
					        util.showModal("#_alertModal", "用户缺少该页面数据权限！");
					    } else {
					        cus_workbench.init(resp.cusId);
					    }
					}
		}); 
	});
</script>
</html>